import { useState, useEffect, useContext } from "react";
import { ThemeContext } from "./ThemeProvier";
function Clock() {
    const [time, setTime] = useState('');
    const { theme, toggleTheme } = useContext(ThemeContext);
    useEffect(() => {
        setInterval(() => {
            setTime(new Date().toLocaleTimeString())
        }, 1000)
    }, [])

    return <>
        <h1 style={{ color: theme === 'dark' ? '#333' : 'red' }}>{time}</h1>
        <button onClick={toggleTheme}>切换主题</button>
    </>
}

export default Clock;